<template>

	<el-container>

		<!-- 左侧   -->
		<el-aside :width=" isCollapse ? '64px' : '200px'">

			<div class="menuTitle">@动力云客管理系统</div>
			<el-menu active-text-color="#ffd04b" background-color="#334157" class="el-menu-vertical-demo"
				default-active="2" text-color="#fff" style="border-right: solid 0" :collapse="isCollapse"
				:collapse-transition="false" :unique-opened="true" :router="true">

				<el-sub-menu index="1">
					<template #title>
						<el-icon>
							<location />
						</el-icon>
						<span>市场活动</span>
					</template>
					<el-menu-item index="/dashboard/activity">市场活动</el-menu-item>
					<el-menu-item index="1-2">市场计划</el-menu-item>
				</el-sub-menu>

				<el-sub-menu index="2">
					<template #title>
						<el-icon>
							<location />
						</el-icon>
						<span>线索管理</span>
					</template>
					<el-menu-item index="1-1">线索管理</el-menu-item>
					<el-menu-item index="1-2">线索管理</el-menu-item>
				</el-sub-menu>

				<el-sub-menu index="3">
					<template #title>
						<el-icon>
							<location />
						</el-icon>
						<span>客户管理</span>
					</template>
					<el-menu-item index="1-1">客户管理</el-menu-item>
				</el-sub-menu>

				<el-sub-menu index="4">
					<template #title>
						<el-icon>
							<location />
						</el-icon>
						<span>交易管理</span>
					</template>
					<el-menu-item index="1-1">交易管理</el-menu-item>
				</el-sub-menu>

				<el-sub-menu index="5">
					<template #title>
						<el-icon>
							<location />
						</el-icon>
						<span>产品管理</span>
					</template>
					<el-menu-item index="1-1">产品管理</el-menu-item>
				</el-sub-menu>

				<el-sub-menu index="6">
					<template #title>
						<el-icon>
							<location />
						</el-icon>
						<span>字典管理</span>
					</template>
					<el-menu-item index="1-1">字典管理</el-menu-item>
				</el-sub-menu>

				<el-sub-menu index="7">
					<template #title>
						<el-icon>
							<location />
						</el-icon>
						<span>用户管理</span>
					</template>
					<el-menu-item index="/dashboard/user">用户管理</el-menu-item>
				</el-sub-menu>

				<el-sub-menu index="8">
					<template #title>
						<el-icon>
							<location />
						</el-icon>
						<span>系统管理</span>
					</template>
					<el-menu-item index="1-1">系统管理</el-menu-item>
				</el-sub-menu>

			</el-menu>

		</el-aside>

		<!--  右侧:   -->
		<el-container class="rightContainer">

			<!--  右侧: 上  -->
			<el-header>
				<el-icon class="show" @click="showMenu()">
					<Fold />
				</el-icon>

				<el-dropdown :hide-on-click="false">
					<span class="el-dropdown-link">
						{{ user.name }} <el-icon class="el-icon--right"><arrow-down /></el-icon>
					</span>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item>我的资料</el-dropdown-item>
							<el-dropdown-item>修改密码</el-dropdown-item>
							<el-dropdown-item divided @click="loginOut()">退出登录</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>

			</el-header>

			<!--  右侧: 中  -->
			<el-main>
				<router-view v-if="isRouterAlive" />
			</el-main>

			<!--  右侧: 下  -->
			<el-footer>FooterFooterFooterFooterFooterFooterFooterFooterFooterFooterFooterFooterFooter</el-footer>

		</el-container>
	</el-container>

</template>

<script>
	import {
		Fold
	} from "@element-plus/icons-vue";

	import {
		doGet
	} from "../http/httpRequest";
	import {
		messageConfirm,
		messageTip,
		removeToken
	} from "../util/util";

	export default {
		name: "DashboardView",

		data() {
			return {
				// 控制左侧菜单左右展开和折叠，true是折叠，false是展开
				isCollapse: false,
				// 登陆用户对象
				user: {},
				// 控制仪表盘页面右侧内容体是否显示
				isRouterAlive: true
			}
		},
		
		// 提供者
		provide() {
			return {
				reload: () => {
					this.isRouterAlive = false;
					this.$nextTick(function() {
						this.isRouterAlive = true;
					})
				},
			}
		},

		// vue 生命周期函数钩子
		mounted() {
			this.loadLoginUser()
		},

		methods: {
			// 左侧菜单左右展开折叠
			showMenu() {
				this.isCollapse = !this.isCollapse;
			},

			loadLoginUser() {
				doGet("/api/login/info", {}).then((resp) => {
					//console.log(resp)
					if (resp != null) {
						this.user = resp.data.data;
					}
				})
			},
			// 退出登录
			loginOut() {
				doGet("/api/logout", {}).then(resp => {
					if (resp.data.code === 200) {
						// 请求成功
						removeToken();
						messageTip("退出成功", "success")
						window.location.href = "/"
					} else {
						messageConfirm("退出异常，是否要强制退出？").then(() => {
							// 请求成功
							removeToken();
							messageTip("退出成功", "success")
						}).catch(() => {
							messageTip("取消强制退出")
						})
					}
				})
			}
		}
	}
</script>

<style scoped>
	.el-aside {
		background: #1a1a1a;
	}

	.el-header {
		background: azure;
		height: 35px;
		line-height: 35px;
	}

	.el-footer {
		background: aliceblue;
		height: 35px;
		line-height: 35px;
		text-align: center;
	}

	.rightContainer {
		height: calc(100vh);
	}

	.menuTitle {
		height: 35px;
		line-height: 35px;
		color: #f9f9f9;
		text-align: center;

	}

	.show {
		cursor: pointer;
	}

	.el-dropdown {
		float: right;
		/*行高*/
		line-height: 35px;
	}
</style>